
<template>
  <div class="device-page">
    <SearchForm
        style="margin-bottom: 0"
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout device-layout">
      <el-card shadow="never" class="box-card">
        <div class="table-handle">
          <el-button style="margin-right: 15px" type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增</el-button>
<!--          <el-upload-->
<!--              class="upload-demo"-->
<!--              action=""-->
<!--              :auto-upload="false"-->
<!--              :show-file-list="false"-->
<!--              :on-change="handleChange"-->
<!--              accept=".xlsx, .xls">-->
<!--            <el-button type="primary" size="mini" icon="el-icon-plus" disabled>导入</el-button>-->
<!--          </el-upload>-->
        </div>
        <div class="charging-pile-list"
             v-loading="loading"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="pile in tableData" :key="pile.id">
              <el-card class="charging-pile-card" :class="getStatusClass(pile)">
                <div style="min-height: 200px;display: flex;flex-direction:column;justify-content: space-between">
                  <div class="pile-header">
                    <div class="status-circle">
                      <span class="status-text">{{ getStatusText(pile) }}</span>
                    </div>
                    <div class="pile-info">
                      <div class="pile-title">
                        {{ pile.deviceName }} ({{ pile.deviceNo }})
                        <el-tag size="mini" :type="pile.deviceType === 1 ? 'danger' : 'primary'">
                          {{ getTypeName(pile.deviceType) }}
                        </el-tag>
                      </div>
                      <div class="pile-details">
                        <div>车位号 {{ pile.deviceCarNo || '无'}}</div>
                        <div>{{ pile.ratedOutputPower }}kw | {{ pile.outputCurrentRange }}V</div>
                        <div>{{ pile.currentForm }} | {{ pile.accordingGb }}</div>
                      </div>
                    </div>

                  </div>
                  <div class="pile-actions">
                    <el-button type="text" style="color: red" @click="onPort(pile)">枪口管理</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="onEdit(pile)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleStatusChange(pile)">
                      {{ pile.enabled == 0 ? '禁用' : '启用' }}
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" style="color: red" @click="onDelete(pile)">删除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty v-if="tableData.length === 0"></el-empty>
        </div>
      </el-card>

      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
    <Add ref="addFormRef" @get-page="initData" />

    <el-dialog
        top="5vh"
        width="1000px"
        title="枪口管理"
        :visible.sync="portShow"
        :close-on-click-modal="false"
        append-to-body
    >
      <PortList v-if="portShow" :deviceId="currentDevice.id"></PortList>
    </el-dialog>
  </div>
</template>
<script>

import crud from "@/mixins/crud";
import { http } from "@/api";
import Add from "./deviceAdd.vue";
import {CommonStatusEnum} from "@/utils/enum";
import PortList from './portList'
export default {
  name: "index",
  components: {
    Add,
    PortList
  },
  props: {
    plotId: {
      type: [Number,String],
      default: 0
    }
  },
  mixins: [crud],
  data() {
    return {
      request:http.device,
      searchList: [
        {
          label: '充电桩编号',
          prop: 'deviceNo',
          name: 'input',
          clearable: true
        },
        {
          label: '充电桩名称',
          prop: 'deviceName',
          name: 'input',
          clearable: true
        },
        {
          label: '充电速度',
          prop: 'deviceType',
          name: 'select',
          clearable: true,
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '快充',
              value: 1
            },
            {
              label: '慢充',
              value: 0
            }
          ]
        }
      ],
      searchParams: {
        deviceName: '',
        deviceNo: '',
        deviceType: ''
      },
      defaultParams: {
        plotId: this.plotId
      },
      tableData: [

      ],
      portShow:false,
      currentDevice: {}
    }
  },
  methods: {
    onPort(row) {
      this.currentDevice = row
      this.portShow = true
    },
    async handleStatusChange(row) {
      await http.device.updateStatus({
        id: row.id,
        enabled: row.enabled == 1 ? 0 : 1
      })
      // 刷新列表
      await this.onSearch()
    },
    handleChange() {},
    getStatusClass(row) {
      const statusMap = {
        idle: 'status-idle',
        enabled: 'status-idle',
        offline: 'status-offline',
        charging: 'status-charging',
        disabled: 'status-disabled',
        fault: 'status-fault'
      }
      if (row.enabled == 0) {
        return statusMap.enabled
        if (row.runningStatus == 0) {
          if (row.useStatus == 0) {
            return statusMap.idle
          } else {
            return statusMap.charging
          }
        } else if (row.runningStatus == 1) {
          return statusMap.offline
        } else if (row.runningStatus == 2) {
          return statusMap.fault
        }
      } else  {
        return statusMap.disabled
      }
    },
    getStatusText(row) {
      const statusMap = {
        idle: '空闲',
        offline: '离线',
        charging: '使用中',
        disabled: '停用',
        enabled: '启用',
        fault: '故障'
      }
      if (row.enabled == 0) {
        return statusMap.enabled
        if (row.runningStatus == 0) {
          if (row.useStatus == 0) {
            return statusMap.idle
          } else {
            return statusMap.charging
          }
        } else if (row.runningStatus == 1) {
          return statusMap.offline
        } else if (row.runningStatus == 2) {
          return statusMap.fault
        }
      } else  {
        return statusMap.disabled
      }
    },
    getTypeName(type) {
      let typeName = {
        0: '慢充',
        1: '快充'
      }
      return typeName[type] || type
    }
  }
}
</script>

<style lang="scss">
.device-page {
  .el-card__body {
    padding: 12px !important;
  }
  .charging-pile-list {
    padding: 12px;
    border:1px solid #EBEEF5;
  }
  .charging-pile-card {
    margin-bottom: 20px;
    border-radius: 8px;
    .pile-actions {
      padding-top: 8px;
    }
    .el-card__body {
      padding-bottom: 8px;
    }

    &.status-idle .status-circle {
      background-color: #67C23A;
    }
    &.status-offline .status-circle {
      background-color: #909399;
    }
    &.status-charging .status-circle {
      background-color: #409EFF;
    }
    &.status-disabled .status-circle {
      background-color: #F56C6C;
    }
    &.status-fault .status-circle {
      background-color: #909399;
    }
  }

  .pile-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .status-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
  }

  .pile-info {
    flex-grow: 1;

    .pile-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pile-details {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .qr-code {
    font-size: 24px;
    color: #409EFF;
  }

  .pile-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #EBEEF5;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .el-button {
      font-size: 14px;
    }
  }
}
</style>
